<template>
	<view class="pbgf">
		<view class="nav bgf">
			<u-tabs :list="tabs_list" @change="selectTabs" :current='current' lineWidth='64rpx' lineHeight='6rpx'
				lineColor='#CD3314' :activeStyle="{
            color: '#CD3314',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#666666',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 140rpx; padding-right: 140rpx; height: 80rpx;"></u-tabs>
		</view>
		<view class="content bgf">
			<view class="p2432">
				<view class="" v-if="list.length>0">
					<view class="pr mb24 coupon br12" v-for="item in list">
						<image class="w100 h100" src="/static/my/user/coupon/coupon.png" mode=""></image>
						<view class="pa0 w100 h100 br10">
							<view class="coupona flex_c">
								<view class="price flex_col flex_c">
									<view class="tc fw600">
										<text class="fs28">￥</text>
										<text class="fs50">{{item.price}}</text>
									</view>
									<view class="mt4 tc fs24">{{item.money ==0?'无门槛卷':'满'+item.money+'使用'}}</view>
								</view>
								<view class="flex1 mlr50">
									<view class="c3 fw600 fs32 sn1">{{item.name}}</view>
									<view class="mt12 c9 fs20">
										<view class="">有效期：</view>
										<view class="mt4">{{item.startdate}}-{{item.enddate}}</view>
									</view>
								</view>
								<view class="coupon_btn flex_c">
									<view class="coupon_btna flex_c fs26" v-if="current==0" @click="employ(item)">立即使用
									</view>
									<view class="flex_c fs26 c9" v-if="current==1">已过期</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png">
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pageSize
	} from '@/components/minxins.js' //引入minxins
	export default {
		mixins: [pageSize],
		components: {},
		data() {
			return {
				current: 0, //标识
				tabs_list: [{
					name: '未使用',
				}, {
					name: '已过期',
				}],
				list: [], //优惠券列表
				price: 0, //商品总价
			}
		},
		onLoad(options) {
			this.method_name = 'myCoupon'
			this.query = {
				type: 1
			}
			this.getList();
			if (options.price) {
				this.price = options.price
			}
		},
		onShow() {

		},
		methods: {
			selectTabs(e) { //切换优惠券
				console.log(e);
				this.current = e.index
				this.query = {
					type: e.index + 1,
					page: 1
				}
				this.getList();
			},
			employ(item) { //立即使用
				// console.log(item);
				let date = (new Date(item.startdate)).getTime()
				let time = new Date().getTime()
				// console.log(date,time)
				
				if(date >= time){
					uni.$u.toast('优惠券还没开始')
				}else if(this.price >= Number(item.money)){
					uni.$emit('endCoupon', item)
					uni.navigateBack()
				}else{
					uni.$u.toast('未达到使用条件')
				}

			}
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99;
		border-top: 1upx solid #F0F0F0;
	}

	.content {
		position: absolute;
		top: 83upx;
		left: 0;
		width: 100%;

		.coupon {
			height: 166upx;

			.coupona {
				height: 118upx;
				padding: 24upx;
			}

			.price {
				width: 130upx;
				height: 100%;
				color: #FAE9AB;
			}

			.coupon_btn {
				width: 160upx;
				height: 100%;

				.coupon_btna {
					width: 148upx;
					height: 52upx;
					background: #CD3314;
					box-shadow: 0px 0px 4upx 0px rgba(198, 198, 198, 0.5);
					border-radius: 41upx;
					color: #FAE9AB;
				}
			}
		}
	}
</style>
